<!--搜索页面-->
<template>
  <div class="search">
    <div class="container search-frame">
      <div class="search-panel">
        <input
          class="search-fast"
          v-model="form.search"
          placeholder="Search now"
        />
        <van-icon @click="clickSearch" name="search" size="1rem" />
      </div>
      <div class="tips-frame">
        <p>{{ proTotal }} items found</p>
      </div>
    </div>
    <ProduList
      :productList="productList"
      :page="form.page"
      :pageSize="form.page_size"
      :total="proTotal"
      @pageChange="pageChange"
      :loading="loading"
    />
  </div>
</template>
<script>
import ProduList from "@/components/subject/ProduList.vue";
export default {
  components: {
    ProduList,
  },
  data() {
    return {
      form: {
        search: this.$route.query.text,
        tag_names: "",
        category_id: "",
        price_start: "",
        price_end: "",
        page: 1,
        page_size: 20,
        order_field: "",
        order_by: "",
      },
      proTotal: 0,
      loading: false,
      productList: [],
    };
  },
  computed: {
    searchText() {
      return this.$store.state.over.searchText;
    },
  },
  watch: {
    searchText(value) {
      this.form.search = value;
      this.searchPro();
    },
  },
  mounted() {
    this.searchPro();
  },
  methods: {
    //搜索商品
    async searchPro() {
      this.productList = [];
      this.loading = true;
      let res = await this.$store.dispatch("menu/productList", this.form);
      this.loading = false;
      if (res.code == 0 && res.data != undefined) {
        this.productList = res.data.list;
        this.proTotal = res.data.paginatio.total;
      }
    },
    //点击搜索
    clickSearch() {
      console.log(this.form.search);
      this.$store.commit("over/setSearchText", this.form.search);
      this.$router.push({
        path: "search",
        query: {
          text: this.form.search,
        },
      });
      this.searchPro();
    },
    //换页
    pageChange(index) {
      this.form.page = index;
      this.searchPro();
    },
  },
};
</script>
<style lang="less" scoped>
@import "search.less";
</style>